<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width: 200px;height: 200px;margin: 0 auto;border: solid 1px black;font-size: 80px;line-height: 200px;text-align: center;}
        .btns{display: flex;justify-content: center}
    </style>
</head>
<body>
    <div class="box">3</div>
    <div class="btns">
        <input type="button" value="开始" id="btn1">
        <input type="button" value="暂停" id="btn2" disabled="disabled">
        <input type="button" value="复位" id="btn3" disabled="disabled">
    </div>
</body>
<script>
    var obox = document.querySelector(".box");
    var obtn1 = document.getElementById("btn1");
    var obtn2 = document.getElementById("btn2");
    var obtn3 = document.getElementById("btn3");

    // 保存初始值，准备给复位使用
    var start = obox.innerHTML;

    // 计时器的返回值
    var t;

    // 开始的点击
    obtn1.onclick = function(){
        // 禁用开始
        obtn1.setAttribute("disabled","disabled");
        // 启用暂停
        obtn2.removeAttribute("disabled")

        // 开启计时器之前先清除
        clearInterval(t);
        // 开启计时器
        t = setInterval(function(){
            // 判断是否到终点（注意从页面上获取到的内容是字符）
            if(obox.innerHTML == 1){
                // 清除计时器
                clearInterval(t);
                // 设置终点值0
                obox.innerHTML = 0;
                // 禁用开始
                obtn1.setAttribute("disabled","disabled");
                // 禁用暂停
                obtn2.setAttribute("disabled","disabled");
                // 启用复位
                obtn3.removeAttribute("disabled");
            }else{
                // 正常的倒计时
                obox.innerHTML = obox.innerHTML - 1;
            }
        }, 1000);
    }

    // 暂停的点击
    obtn2.onclick = function(){
        // 禁用暂停
        obtn2.setAttribute("disabled","disabled");
        // 启用开始
        obtn1.removeAttribute("disabled")
        // 清除计时器以达到暂停的目的
        clearInterval(t)
    }

    // 复位的点击
    obtn3.onclick = function(){
        // 重置数字为初始值
        obox.innerHTML = start;
        // 启用开始
        obtn1.removeAttribute("disabled");
        // 禁用复位
        obtn3.setAttribute("disabled","disabled");
    }

</script>
</html>